<script setup lang="ts">
	import {  reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	const props = defineProps(['active'])
	interface changeObject {
		detail : number;
	}
	onLoad(() => {
		uni.hideTabBar();
	})
	let tabbar = reactive([
	
		// {
		// 	normal: '/static/tabBar/z-meta.png',
		// 	active: '/static/tabBar/z-meta-select.png',
		// 	name: "Z元素",
		// 	url: "/pages/z-meta/index"
		// },
		{
			normal: '/static/owo/tabBar/home.png',
			active: '/static/owo/tabBar/home-select.png',
			name:"首页",
			url: "/pages/index/index"
		},
		{
			normal: '/static/owo/tabBar/vs.png',
			active: '/static/owo/tabBar/vs-select.png',
			name: "无线赏",
			url: "/pages/pk/index"
		},
		{
			normal: '/static/owo/tabBar/package.png',
			active: '/static/owo/tabBar/package-select.png',
			name: "车厢",
			url: "/pages/package/index"
		},
		{
			normal: '/static/owo/tabBar/mine.png',
			active: '/static/owo/tabBar/mine-select.png',
			name: "我的",
			url: "/pages/mine/index"
		}
	]);
	function onChange(event : changeObject) {
		uni.switchTab({
			url: tabbar[event.detail].url
		})
	}
</script>

<template>
	<view>
		<van-tabbar :active="active" @change="onChange" active-color="#FEF3BB" inactive-color="rgba(254, 243, 187, 0.45)">
			<van-tabbar-item v-for="(item,index) in tabbar" :key="item.name"  >
					<image slot="icon" :src="item.normal" mode="aspectFit"
						style="width: 24px; height: 24px;position: relative;z-index: 33;" />
					<image slot="icon-active" :src="item.active" mode="aspectFit" style="width: 24px; height: 24px;" />
					{{item.name}}
			</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<style lang="scss">
	
</style>